<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="800" height="600" style="border:1px solid blue;"></canvas>
    <script>
        // echarts内部原理用的就是canvas

        // canvas 像素图 放大会失真模糊 手机拍的照片 
        // svg autocad ug 类似 不管怎么放大 --> 字体图标(iconfont) 矢量图 放大不会失真，信息量特别多，只适合简单的图
        // // canvas是h5的新增的东西 可以画画
        // 大转圈 抽奖 
        // 刮刮卡
        // 简单游戏 围棋

        // canvas 2d(刮刮卡、平面游戏) 3d（地球转 ） 
        
        var canvas = document.querySelector('canvas');
        var huabi = canvas.getContext('2d');// 画笔
        // 画一根线  蚂蚁线 路径
        huabi.moveTo(100,100);
        huabi.lineTo(300,400);
        huabi.strokeStyle = 'red';
        huabi.stroke();
        huabi.fillRect(150,150,200,80);
    </script>
</body>
</html>